<template>
	<view class="content">
		<custom-tarbar :selected="4"></custom-tarbar>
		<view class="personal">
		
		
		<!-- ============================================================================ -->
		<!-- 加一点卡片的效果 -->
		
		<view class="cu-card case" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="image">
					<image :src="img"
					 mode="widthFix"></image>
						<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{motto}}</text></view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="portrait"></view>
						<view class="content flex-sub">
							<view class="text-grey">{{name}}</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
	
		<!-- 菜单路径 -->
		
		<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
			<navigator url="applypublisher" class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-appreciate text-orange"></text>
					<text class="text-grey">申请成为活动2发布者</text>
				</view>
			</navigator>
			<navigator url="applyedactivity" class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content" >
					<text class="cuIcon-group text-cyan"></text>
					<text class="text-grey">查看参加过的活动</text>
				</view>
			</navigator>
			<navigator url="personImg" class="cu-item"> 
				<view class="content">
					<text class="cuIcon-cameraadd text-green"></text>
					<text class="text-grey">个人头像的上传</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-green shadow">
						<text class="cuIcon-upload"></text> 上传</button> 
				</view>
			</navigator>
			<view  @tap="showModal" data-target="DialogModal1" class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-communityfill te1xt-olive"></text>
					<text class="text-grey">上传个人格言</text>
				</view>
			</view>
			<navigator url="changepassword" class="cu-item" :class="menuArrow?'arrow':''">
				<view class="content">
					<text class="cuIcon-lock text-red"></text>
					<text class="text-grey">修改密码</text>
				</view>
			</navigator>
			<button class="cu-btn bg-gradual-green margin-tb-lg  lg block" @tap="QuitAccount">
				退出登录
			</button>
			
			<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">格言：</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<view class="cu-form-group">
							<input placeholder="输入需要上传的格言" v-model="motto"></input>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left"  @tap="upload">上传</button>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- ============================================================================ -->
		<down-block></down-block><down-block></down-block>
		
		
		</view>	
	</view>
</template>

<script>
import customTarbar from '@/wxcomponents/custom-tarbar/custom-tarbar.vue';
import downBlock from '../../components/down_block.vue'
export default {
	components: {
		'custom-tarbar': customTarbar,
		downBlock
	},
	data(){
		return{
			name:"",
			menuArrow:true,
			menuCard:true,
			modalName: null,
			motto:"",
			img:"",
			portrait:''
			
		}
	},
	onLoad() {
		this.name=JSON.parse(uni.getStorageSync("USERS_KEY")).username
		this.getimg()
		this.getmotto()
	},
	methods:{
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async upload(){
				const res= await this.$myRequest({
					url:'/user/uploadMotto',
					data:{
						username:this.name,
						newMotto:this.motto
					}
				})
				uni.showToast({
					title:res.data
				})
				this.modalName=null
			},
			async getimg(){
				const res= await this.$myRequest({
					url:'/user/portrait',
					data:{
						username:this.name,
					}
				})
				this.img=getApp().globalData.BASE_URL+res.data
				
				this.portrait="background-image:url("+this.img+");"
				console.log("portrait",this.portrait)
				
				
			},
			async getmotto(){
				const res= await this.$myRequest({
					url:'/user/motto',
					data:{
						username:this.name,
					}
				})
				// console.log("img：",res)
				this.motto=res.data
			},
			QuitAccount(){
				uni.clearStorage();
				uni.reLaunch({
					url:"../index/index"
				})
			}
	}
};
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}
	
	.page.show {
		overflow: hidden;
	}
	
	.switch-sex::after {
		content: "\e716";
	}
	
	.switch-sex::before {
		content: "\e7a9";
	}
	
	.switch-music::after {
		content: "\e66a";
	}
	
	.switch-music::before {
		content: "\e6db";
	}
	
</style>
